<template>
  <div class="body">
    <Zi @zi="pull" />
    <span>{{ this.datazi }}</span
    ><Zi2>
      <h2 slot="xiao">这是具名插槽插入的内容</h2>
    </Zi2>
    <span>{{ this.$route.params.canshu1 }}</span>
    <div><button @click="hunru()">调用局部混入方法</button></div>
    <div><input type="number" v-model="nums" />{{ this.nums | add }}</div>
    <span v-red>红色的自定义指令</span>

    <Foo />
  </div>
</template>

<script>
import Zi from "./dindan/d1.vue";
import Zi2 from "./dindan/d2.vue";
import { demo } from "@/mixins";
export default {
  mixins: [demo],
  data() {
    return {
      datazi: "",
      nums: null,
    };
  },
  methods: {
    pull(data) {
      this.datazi = data;
    },
  },
  components: {
    Zi,
    Zi2,
  },
  filters: {
    add(val) {
      return ++val;
    },
  },
  directives: {
    red: {
      inserted(el) {
        el.style.color = "red";
      },
    },
  },
};
</script>

<style scoped>
.body {
  font-size: 0.16rem;
}
</style>